<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="个人简介" rightIcon="icon-guanbi" mtClass="no-bg" />
        <div class="blank-9"></div>
        <div class="list">
            <mt-field placeholder="请输入二十个字数以内的个人简介" type="text" disableClear v-model="inputValueIntro"></mt-field>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="inputValueIntro?false:true" @click="editIntro">确定</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { mapMutations, mapActions } from 'vuex'
import mtHeader from "@/components/Header"
export default {
    data() {
        return {
            inputValueIntro: ''
        }
    },
    components: {
        mtHeader
    },
    mounted(){
        this.inputValueIntro = this.$route.query.userProfiles
    },
    methods:{
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        ...mapActions('user', [
            'post_userInfo_data'
        ]),
        editIntro(){
            if(this.inputValueIntro.length > 20){
                Toast({
                    message: "请输入二十个字数以内的个人简介",
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                })
            }else{
                this.post_userInfo_data({
                    userProfiles: this.inputValueIntro
                }).then(res => {
                    if (res) {
                        if( res.code == 200 ){
                            this.set_userInfo(res.data)
                            Toast({
                                message: "设置成功",
                                iconClass: 'icon iconfont icon-ic_check'
                            })
                            this.$router.push('/account/myInfo')
                        }else{
                            Toast({
                                message: res.msg,
                                iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                            })
                            this.inputValueIntro = this.$route.query.userProfiles;
                        }
                    }
                })
            }
        }
    }
}
</script>